<template>
  <nav class="fixed bottom-0 left-0 w-full bg-white flex items-center shadow-md">
    <ul class="flex h-14 w-full justify-around items-center">
      <li
          v-for="item in navItems"
          :key="item.name"
          class="flex flex-col items-center justify-center flex-1 cursor-pointer"
          @click="handleNavigation(item)"
      >
        <div
            :class="[
            isActive(item.path) ? item.activeIcon : item.icon,
            'text-xl',
            isActive(item.path) ? 'text-primary' : 'text-gray-500'
          ]"
        />
        <span
            :class="[
            'text-xs mt-1',
            isActive(item.path) ? 'text-primary' : 'text-gray-500'
          ]"
        >
          {{ item.name }}
        </span>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { useUserStore } from '@/stores/user.js' // 确保路径正确且文件存在
const userStore = useUserStore()
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const navItems = ref([
  { name: '首页', icon: 'i-mdi-home-outline', path: '/', activeIcon: 'i-mdi-home' },
  { name: '发现', icon: 'i-mdi-compass-outline', path: '/discover', activeIcon: 'i-mdi-compass' },
  { name: '订单', icon: 'i-mdi-file-document-outline', path: '/order-list', activeIcon: 'i-mdi-file-document-outline' },
  { name: '我的', icon: 'i-mdi-account-outline', path: '/profile', activeIcon: 'i-mdi-account' }
])

const isActive = (path) => {
  return route.path === path
}

const handleNavigation = (item) => {
  // 如果是"我的"页面且未登录，跳转到登录页
  if (item.path === '/profile' && !userStore.isLoggedIn) {
    router.push('/login')
    return
  }
  router.push(item.path)
}
</script>



